<div class="setting-container">
    <div class="table-row">
        <div class="setting-card-padding"></div>
        <div class="setting-card mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">SETTINGS</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <div class="mdl-card__supporting-text">
                    Content Services host URL configuration
                </div>
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
                        <input data-automation-id="ecmHost"
                               class="mdl-textfield__input" tabindex="1"
                               type="text" tabindex="1"
                               (change)="onChangeECMHost($event)"
                            pattern="^(http|https):\/\/.*[^/]$"
                            id="ecmHost"
                            value="{{ecmHost}}"
                            placeholder="http(s)://host|ip:port(/path)">
                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
                        <span class="mdl-textfield__error">ECM host is not valid! http(s)://host|ip:port(/path)</span>
                    </div>
                </nav>

                <div class="mdl-card__supporting-text">
                    Process Services host URL configuration
                </div>
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
                        <input
                            data-automation-id="bpmHost"
                            class="mdl-textfield__input"
                               type="text"
                               (change)="onChangeBPMHost($event)"
                            tabindex="2"
                            pattern="^(http|https):\/\/.*[^/]$"
                            id="bpmHost"
                            value="{{bpmHost}}"
                            placeholder="http(s)://host|ip:port(/path)">
                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
                        <span class="mdl-textfield__error">BPM host is not valid! http(s)://host|ip:port(/path)</span>
                    </div>
                </nav>
            </div>
            <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()" >
                Back
                </a>
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
                    Apply
            </a>
        </div>
        </div>
        <div class="setting-card-padding"></div>
    </div>
</div>
